<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<style>
    .add-news {
        width: 800px;
        height: 500px;
        background-color: white;
        position: absolute;
        border: 2px solid #2b6a98;
        top: 300px;
        left: 600px;
        right: 0;
        bottom: 0;
        display: none;
        overflow-y: scroll;
        padding: 10px;
    }
</style>
<script>
    function tanchuAdd() {
        $("#addNews").toggle();
    }

    $(function () {
        $("#loadHtml").load("backNewsAdd.html");

    });

    function dragFunc(id) {
        var Drag = document.getElementById(id);
        Drag.onmousedown = function (event) {
            var ev = event || window.event;
            event.stopPropagation();
            var disX = ev.clientX - Drag.offsetLeft;
            var disY = ev.clientY - Drag.offsetTop;
            document.onmousemove = function (event) {
                var ev = event || window.event;
                Drag.style.left = ev.clientX - disX + "px";
                Drag.style.top = ev.clientY - disY + "px";
                Drag.style.cursor = "move";
            };
        };
        Drag.onmouseup = function () {
            document.onmousemove = null;
            this.style.cursor = "default";
        };
    };
    dragFunc("addNews");
</script>
<body class="content-body">
<table class="table">
    <caption>基本的表格布局</caption>
    <thead>
    <tr>
        <th>名称</th>
        <th>城市</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Tanmay</td>
        <td>Bangalore</td>
        <td>
            <input type="button" value="编辑" onclick="tanchuAdd()">
            <a href="javascript:$('#back-content').load('backNewsAdd.html')">编辑</a>
            <a href="#">删除</a>
        </td>
    </tr>
    <tr>
        <td>Sachin</td>
        <td>Mumbai</td>
        <td>
            <a href="#" onclick="return tanchuAdd()">编辑</a>
            <a href="#">删除</a>
        </td>
    </tr>
    </tbody>
</table>
<div id="addNews" class="add-news">
    <div id="banner" style="height: 30px;width: 100%;background-color: #6eaedd;cursor: pointer" class="float-left">
        <div onclick="tanchuAdd()" class="float-right">X</div>
    </div>
    <div id="loadHtml"></div>
</div>
</body>
</html>